<template>
  <div>
    <!-- //劳资概览 -->
    <div class="overview">
      <div style="width:1200px;margin:0 auto">
        <div class="title">劳资概览</div>
        <div class="flexStart content">
          <div class="laborWage-cell">
            <div class="laborWage-title">劳务合同登记数量</div>
            <div>
              <span style="font-size:46px">{{this.laborWageTotal.contractRegisteredTotal}}</span>
              <span style="font-size:14px">个</span>
            </div>
          </div>
          <div class="laborWage-cell">
            <div class="laborWage-title">银行卡登记数量</div>
            <div>
              <span style="font-size:46px">{{this.laborWageTotal.wageCardRegisteredTotal}}</span>
              <span style="font-size:14px">个</span>
            </div>
          </div>
          <div class="laborWage-cell">
            <div class="laborWage-title">劳资专管员</div>
            <div>
              <span style="font-size:46px">{{this.laborWageTotal.laborManagerTotal}}</span>
              <span style="font-size:14px">个</span>
            </div>
          </div>
          <div class="laborWage-cell-last" style="border:none">
            <div class="laborWage-title">工资发放总额</div>
            <div>
              <span style="font-size:46px">{{(this.laborWageTotal.wageTotal/10000).toFixed(2)}}</span>
              <span style="font-size:14px">万元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 劳务信息登记 -->
    <div class="infoRegist">
      <div style="width:1200px;margin:0 auto">
        <div class="title">劳务信息登记</div>
        <div class="flexCenter">
          <div style="width:80%;height:759px">
            <Echart :echartObj="echartObj" />
          </div>
        </div>
      </div>
    </div>
    <!-- 劳资专管员 -->
    <div class="specialManager">
      <div style="width:1200px;margin:0 auto;">
        <div class="title" style="margin-bottom:20px">劳资专管员</div>
        <div class="flexEnd" style="margin-bottom:20px">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="color:#666">
              {{this.projectName}}
              <a-icon type="caret-down" style="color:#666" />
            </a>
            <a-menu slot="overlay" @click="onMenu">
              <a-menu-item :key="item.id" v-for="item in projectData">{{item.briefName}}</a-menu-item>
              <!-- <a-menu-item key="2">京沪扩建</a-menu-item>
              <a-menu-item key="3">南部通道</a-menu-item>-->
            </a-menu>
          </a-dropdown>
        </div>
        <div class="table">
          <a-table :columns="columns" :data-source="data" :pagination="false"></a-table>
        </div>
        <!-- 分页 -->
        <div class="pagination flexBetween">
          <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
          <div>
            <a-pagination
              :current="current"
              :page-size-options="pageSizeOptions"
              :total="this.configFun.pageNum(total)"
              show-size-changer
              show-quick-jumper
              :page-size="pageSize"
              @change="pageChange"
              @showSizeChange="onShowSizeChange"
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
                <!-- <span v-if="props.value === '40'">全部</span> -->
              </template>
            </a-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echarts/index.vue'
import { queryLabour, queryLabourManager } from '@/api/gateway'

const columns = [
  { title: '标段号', dataIndex: 'tenderCode', key: 'tenderCode', align: 'center' },
  { title: '单位名称', dataIndex: 'orgName', key: 'orgName', align: 'center' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName', align: 'center' },
  { title: '联系电话', dataIndex: 'cellphone', key: 'cellphone', align: 'center' }
]
const data = [
  {
    key: 1,
    biaoduan: 'PGK-TZ3',
    laborName: '中交路桥建设有限公司',
    name: '张三',
    tell: '17569875326'
  },
  {
    key: 2,
    biaoduan: 'PGK-TZ3',
    laborName: '中交路桥建设有限公司',
    name: '张三',
    tell: '17569875326'
  },
  {
    key: 3,
    biaoduan: 'PGK-TZ3',
    laborName: '中交路桥建设有限公司',
    name: '张三',
    tell: '17569875326'
  }
]
export default {
  props: ['projectData'],
  data() {
    return {
      echartObj: {},
      projectName: this.projectData[0].briefName,
      columns: columns,
      data: [],
      current: 1,
      pageSize: 10,
      total: 0,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      laborWageTotal: {},
      projectId: this.projectData[0].id
    }
  },
  components: {
    Echart
  },
  mounted() {
    this.getLaborWage()
    this.getLabourManager()
  },
  methods: {
    //获取劳务工资
    getLaborWage() {
      queryLabour({}).then((res) => {
        this.laborWageTotal = res.data.data
        if (!this.laborWageTotal.wageTotal) {
          this.laborWageTotal.wageTotal = 0
        }

        let construction = []
        let contract = []
        let card = []
        let project = []
        this.laborWageTotal.projectLabourInfoVOList.forEach((res) => {
          construction.push(res.personTotal)
          contract.push(res.contractRegisteredTotal)
          card.push(res.wageCardRegisteredTotal)
          project.push(res.projectName)
        })
        this.echartObj = {
          color: ['#5470C6', '#91CC75', '#FAC858'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['施工人员数量', '劳务合同登记', '银行卡登记']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: project
          },
          series: [
            {
              name: '施工人员数量',
              type: 'bar',
              data: construction
            },
            {
              name: '劳务合同登记',
              type: 'bar',
              data: contract
            },
            {
              name: '银行卡登记',
              type: 'bar',
              data: card
            }
          ]
        }
      })
    },
    //获取劳资专管员
    getLabourManager() {
      let data = {
        page: this.current,
        projectId: this.projectId,
        size: this.pageSize
      }
      queryLabourManager(data).then((res) => {
        if (!res.data.data) {
        this.data = []
      }else{
        res.data.data.forEach((res) => {
          res.id = res.orgPersonId
        })
        this.data = res.data.data
        this.total=res.data.total
      }

        
      })
    },
    //点击菜单
    onMenu(val) {
      this.projectId = val.key
      
      this.projectData.forEach((res) => {
        if (val.key == res.id) {
          this.projectName = res.briefName
        }
      })
      this.getLabourManager()
      // console.log(val.key)
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    }
  }
}
</script>

<style scoped lang='less'>
.overview {
  width: 100%;
  height: 384px;
  background: url('../../../assets/img/wagebg.png');
  overflow: hidden;
}
.title {
  font-size: 24px;
  margin-top: 60px;
  margin-bottom: 58px;
  font-weight: bold;
  color: #333333;
}
.laborWage-title {
  font-size: 14px;
}
.laborWage-cell {
  width: 20%;
  margin-left: 5%;
  border-right: 1px solid #f0f0f0;
}
.laborWage-cell-last {
  width: 20%;
  margin-left: 5%;
  // margin-right: 0;
}
.content {
  background: #fff;
  padding: 45px 0px;
}
.table {
  margin-bottom: 20px;
}
.specialManager {
  padding-bottom: 100px;
}
</style>
